<script setup>
import { onMounted, ref, computed } from 'vue';
import {
    reqPsychologyNoteDetail,
    reqCancelPsychologyNote,
    reqUpdatePsychologyNote,
    reqCompletePsychologyNote
} from '@/api/teacher/record/psychology';
import { useRouter, useRoute } from 'vue-router';
import { useTeacherStore } from '@/stores/modules/teacherStore';
import { showToast, showFailToast, showSuccessToast } from 'vant';

const teacherStore = useTeacherStore();

const route = useRoute();

const router = useRouter();

// 是否展示加载
const loading = ref(true);

// 是否展示form
const isShowForm = ref(false);

// 是否展示form2
const isShowForm2 = ref(false);

// 是否展示撤销申请
const isShowCancel = ref(false);

// 放行条信息
const psychologyDetail = ref({});

// 审批内容
const teacherReview = ref('');

// 学生心理状况
const condition = ref(0);

// 获取预约信息
const getPsychology = async () => {
    try {
        const result = await reqPsychologyNoteDetail(route.query.id);

        if (result.status == 200) {
            psychologyDetail.value = result.data;

            const data = result.data;
            const state = result.data.state;
            const tNum = result.data.teacherNum;
            // const endTime = result.data?.endTime?.slice(0, 10);

            if (state == 0 && data.userNumber == teacherStore.teacherId) {
                isShowCancel.value = true;
            }
            if (state == 0 && tNum == teacherStore.teacherId) {
                isShowForm.value = true;
            }
            if (state == 23 && tNum == '1311') {
                isShowForm2.value = true;
            } else if (state == 23 && tNum == teacherStore.teacherId) {
                isShowForm2.value = true;
            }

            // //18点之后的预约，显示预约地点供老师选择
            // if (tNum == 'Y1104' && endTime == '18:00:00') {
            // } else if (tNum == 'Y1104' && endTime == '20:00:00') {
            // } else if (tNum == 'Y1103' && endTime == '18:00:00') {
            // } else if (tNum == 'Y1103' && endTime == '20:00:00') {
            // }
            // //18点之后的预约通过后，隐藏预约地点
            // if (state == 23 && tNum == 'Y1104' && endTime == '18:00:00') {
            // } else if (state == 23 && tNum == 'Y1104' && endTime == '20:00:00') {
            // } else if (state == 23 && tNum == 'Y1103' && endTime == '18:00:00') {
            // } else if (state == 23 && tNum == 'Y1103' && endTime == '20:00:00') {
            // }
            // //18点之后的预约未通过时，隐藏预约地点
            // if (state == 24 && tNum == 'Y1104' && endTime == '18:00:00') {
            // } else if (state == 24 && tNum == 'Y1104' && endTime == '20:00:00') {
            // } else if (state == 24 && tNum == 'Y1103' && endTime == '18:00:00') {
            // } else if (state == 24 && tNum == 'Y1103' && endTime == '20:00:00') {
            // }
            // //18点之后的预约已完成后，隐藏预约地点
            // if (state == 33 && tNum == 'Y1104' && endTime == '18:00:00') {
            // } else if (state == 33 && tNum == 'Y1104' && endTime == '20:00:00') {
            // } else if (state == 33 && tNum == 'Y1103' && endTime == '18:00:00') {
            // } else if (state == 33 && tNum == 'Y1103' && endTime == '20:00:00') {
            // }
            // //18点之后的预约未完成时，隐藏预约地点
            // if (state == 34 && tNum == 'Y1104' && endTime == '18:00:00') {
            // } else if (state == 34 && tNum == 'Y1104' && endTime == '20:00:00') {
            // } else if (state == 34 && tNum == 'Y1103' && endTime == '18:00:00') {
            // } else if (state == 34 && tNum == 'Y1103' && endTime == '20:00:00') {
            // }

            loading.value = false;
        } else {
            throw new Error(result.statusText || '获取申请信息失败');
        }
    } catch (e) {
        showFailToast(e.message);
        router.push({ name: 'reservation-index' });
    }
};

onMounted(() => {
    getPsychology();
});

const state = computed(() => {
    if (psychologyDetail.value.state == 0) {
        return '审核中';
    } else if (psychologyDetail.value.state == 23) {
        return '通过';
    } else if (psychologyDetail.value.state == 24) {
        return '未通过';
    } else if (psychologyDetail.value.state == 33) {
        return '已完成';
    } else if (psychologyDetail.value.state == 34) {
        return '未完成';
    }
    return '';
});

const isUrgent = computed(() => {
    if (psychologyDetail.value.urgentState == 0) {
        return '一般';
    } else if (psychologyDetail.value.urgentState == 1) {
        return '紧急';
    }
});

// 通过
const pass = async () => {
    //18点之后的预约审核之后，在微信通知的通过后面加上预约地点以便学生知晓
    // if (searchJSON.teacherNum == "Y1104" && endtime == "18:00:00") {//六点之后的预约地点的微信通知
    // 	searchJSON.doctorReply = reply + '(' + "预约地点为" + $("#select4 option:selected").text() + ')';
    // } else if (searchJSON.teacherNum == "Y1104" && endtime == "20:00:00") {//六点之后的预约地点的微信通知
    // 	searchJSON.doctorReply = reply + '(' + "预约地点为" + $("#select4 option:selected").text() + ')';
    // } else if (searchJSON.teacherNum == "Y1103" && endtime == "18:00:00") {//六点之后的预约地点的微信通知
    // 	searchJSON.doctorReply = reply + '(' + "预约地点为" + $("#select4 option:selected").text() + ')';
    // }else if (searchJSON.teacherNum == "Y1103" && endtime == "20:00:00") {//六点之后的预约地点的微信通知
    // 	searchJSON.doctorReply = reply + '(' + "预约地点为" + $("#select4 option:selected").text() + ')';
    // }
    try {
        const result = await reqUpdatePsychologyNote({
            id: route.query.id,
            state: 23,
            teacherNum: teacherStore.teacherId
        });

        if (result.status == 200) {
            showSuccessToast('操作成功, 3秒后自动跳转到首页');
            const timer = setTimeout(() => {
                clearTimeout(timer);
                router.push({ name: 'home-teacher' });
            }, 3000);
        } else {
            throw new Error(result.statusText || '操作失败, 请重试');
        }
    } catch (e) {
        showFailToast(e.message || '操作失败, 请重试');
    }
};

// 撤销申请
const cancelNote = async () => {
    try {
        const result = await reqCancelPsychologyNote();

        if (result.status == 200) {
            showSuccessToast({
                message: '撤销成功, 3秒后自动跳转到首页',
                duration: 3000
            });
            const timer = setTimeout(() => {
                clearTimeout(timer);
                router.push({ name: 'home-teacher' });
            }, 3000);
        } else {
            throw new Error(result.statusText || '撤销失败');
        }
    } catch (e) {
        showFailToast(e.message || '操作失败, 请重试');
    }
};

// 完成申请
const complete = async (state, review) => {
    try {
        const result = await reqCompletePsychologyNote({
            id: route.query.id,
            resultType: condition.value + '',
            resultOpinion: review === '' ? review : teacherReview.value,
            state: state
        });

        if (result.status == 200) {
            showSuccessToast({
                message: '操作成功, 3秒后自动跳转到首页',
                duration: 3000
            });
            const timer = setTimeout(() => {
                clearTimeout(timer);
                router.push({ name: 'home-teacher' });
            }, 3000);
        } else {
            throw new Error(result.statusText || '操作失败请重试');
        }
    } catch (e) {
        showFailToast(e.message);
    }
};
</script>

<template>
    <div class="container" v-loading="loading">
        <h2 class="heading">{{ psychologyDetail.userName }}的预约申请</h2>
        <el-descriptions :column="1" size="large">
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="姓名"
            >
                {{ psychologyDetail.userName }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="学号"
            >
                {{ psychologyDetail.userNumber }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="电话"
            >
                {{ psychologyDetail.userPhone }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="班级"
                v-if="psychologyDetail.className"
            >
                {{ psychologyDetail.className }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="出生日期"
                v-if="psychologyDetail?.userBirthday"
            >
                {{ psychologyDetail?.userBirthday?.slice(0, 10) }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="预约时间"
            >
                {{ psychologyDetail.startTime }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="结束时间"
            >
                {{ psychologyDetail.endTime }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="咨询内容"
            >
                {{ psychologyDetail.reason || '心理宣泄' }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="咨询类别"
                v-if="psychologyDetail.reason"
            >
                {{ isUrgent }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="审批人"
            >
                {{ psychologyDetail.teacherName }}
            </el-descriptions-item>
            <el-descriptions-item
                label-class-name="content"
                class-name="content"
                label="审核状态"
            >
                {{ state }}
            </el-descriptions-item>
        </el-descriptions>
        <div class="form" v-if="isShowForm">
            <div class="form__input-wrapper">
                <label class="input-label">审批回复</label>
                <el-input
                    size="large"
                    placeholder="请填写审批回复"
                    v-model.trim="teacherReview"
                ></el-input>
            </div>
            <div class="form__button-wrapper">
                <el-button
                    type="primary"
                    size="large"
                    class="button"
                    @click="pass"
                >
                    通过
                </el-button>
                <el-button
                    type="primary"
                    size="large"
                    class="button"
                    @click="pass"
                >
                    不通过
                </el-button>
            </div>
        </div>
        <div class="form" v-if="isShowForm2">
            <div class="form__input-wrapper">
                <label class="input-label" style="width: 220rem"
                    >医生判断学生状况</label
                >
                <el-select
                    v-model="condition"
                    placeholder="选择学生状况"
                    size="large"
                >
                    <el-option
                        v-for="(item, index) in [
                            '正常',
                            '疑似心理疾病',
                            '心理疾病'
                        ]"
                        :key="item"
                        :label="item"
                        :value="index"
                    />
                </el-select>
            </div>
            <div class="form__input-wrapper">
                <label class="input-label">审批回复</label>
                <el-input
                    size="large"
                    placeholder="请填写审批回复"
                    v-model.trim="teacherReview"
                ></el-input>
            </div>
            <div class="form__button-wrapper">
                <el-button
                    type="primary"
                    size="large"
                    class="button"
                    @click="complete(33)"
                >
                    已完成
                </el-button>
                <el-button
                    type="primary"
                    size="large"
                    class="button"
                    @click="complete(34, '')"
                >
                    未完成
                </el-button>
            </div>
        </div>
        <el-button
            class="cancel-button"
            type="primary"
            size="large"
            v-if="isShowCancel"
            @click="cancelNote"
        >
            撤销申请
        </el-button>
    </div>
</template>

<style scoped lang="scss">
.container {
    padding: 20rem;
    background-color: rgb(247, 247, 247);
}

.heading {
    font-size: 22rem;
    text-align: center;
    margin-bottom: 20rem;
    font-weight: bold;
}

:deep(.content) {
    font-size: 18rem !important;
}

.form {
    &__input-wrapper {
        display: flex;
        align-items: center;
        margin-bottom: 20rem;
    }

    &__button-wrapper {
        width: 100%;
        text-align: center;

        .button {
            font-size: 18rem;
        }
    }

    .input-label {
        width: 120rem;
        font-size: 18rem;
    }
}

.cancel-button {
    width: 100%;
}
</style>
